import Taro, {Component} from '@tarojs/taro'
import {AtImagePicker} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {View, Textarea, Input, Text, Form, Button} from '@tarojs/components'
import {IStoreProps} from '../../store/Stores'

import './report_detail.less'
// 举报组件
import {getRuntime} from '../../utils/common'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Report extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

   state = {
     pictureArr: [],
     picture: '',
     status: null,
     description: '',
     phoneNumber: '',
     loading: false,
     disabled: false,
     submitText: '立即举报'
   }

  componentDidMount(): void {
    Taro.setNavigationBarTitle({ title:'举报' })
  }

  onChangeImg(type,e) {
    getRuntime().uploadFile(e, urls => {
      this.setState({
        [type]: urls.join(',')
      })
      getRuntime().showToast('上传图片成功~')
    })
    this.setState({
      [type+'Arr']: e
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  formSubmit(e) {
    let { picture } = this.state
    let { description,phoneNumber } = e.detail.value
    let { ComplainStore } =  this.props.stores
    if(!description){getRuntime().showToast('请填写举报内容~'); return false}
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    ComplainStore.pushComplain({
      form: {
        description,
        picture,
        phoneNumber,
        status: 0
      },
     callBack: () => {
       getRuntime().navigateTo('/pages/other/report_success')
     }
    })
  }

  render() {
    let { loading,disabled,submitText,pictureArr } = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
        <View className='item-group'>
           <Textarea className='from-textarea' name='description' placeholderClass='placeholder-class'
                     placeholder='请详细描述被举报对象的恶意行为' style={{padding:0}}/>
          <View className='input-group input-upload bbnone'>
            <View className='input-name'>上传相关图片 <Text className='list-small list-desc'>(最多4张)</Text> </View>
            <AtImagePicker
              length={4}
              count={2}
              showAddBtn={true}
              files={pictureArr}
              onChange={this.onChangeImg.bind(this,'picture')}
            />
          </View>
        </View>
        <View className='item-group pt0 pb0'>
          <View className='input-group'>
            <View className='input-name'>联系方式</View>
            <Input className='from-input' name='phoneNumber' type='number' maxLength={11} placeholderClass='placeholder_class' placeholder='请填写您的手机号码' />
          </View>
        </View>

        <Button className='from-submit page-from-submit' formType='submit' disabled={disabled} loading={loading}>{submitText}</Button>
        </Form>
      </View>
    )
  }
}

export default Report

